<template>
  <el-form ref="formRef" :model="formModel" :rules="rules" label-width="130px" class="dialog-form" label-position="right" status-icon>
    <el-form-item label="所属城市:" prop="cityCode">
      <query-dict
        :dict-list="cityList"
        class="select-item"
        :disabled="initCityCode !== '00'"
        placeholder="请选择所属城市"
        :value.sync="formModel.cityCode"
      ></query-dict>
    </el-form-item>
    <el-form-item label="计费策略名称:" prop="name">
      <el-input v-model.trim="formModel.name" class="form-item" placeholder="请输入计费策略名称" clearable />
    </el-form-item>
    <el-form-item label="时间计费:" prop="timeMoney">
      <el-input v-model.trim="formModel.timeMoney" class="select-item" placeholder="请输入时间计费金额" clearable>
        <template slot="append">分</template>
      </el-input>
    </el-form-item>
    <el-form-item label="时间计费单元:" prop="timeUnit">
      <el-input v-model.trim="formModel.timeUnit" class="select-item" placeholder="请输入时间单元" clearable>
        <template slot="append">分钟</template>
      </el-input>
    </el-form-item>
    <el-form-item label="里程计费:" prop="milesMoney">
      <el-input v-model.trim="formModel.milesMoney" class="select-item" placeholder="请输入里程计费金额" clearable>
        <template slot="append">分/公里</template>
      </el-input>
    </el-form-item>
    <!-- <el-form-item label="是否启用:" prop="status">
      <query-dict
        :dict-list="disabledStatus"
        showType="radio"
        class="select-item"
        placeholder="请选择是否启用"
        :value.sync="formModel.status"
      ></query-dict>
    </el-form-item> -->
    <el-form-item label="车辆类型:" prop="carModelId">
      <query-dict
        :dict-list="carTypeList"
        filterable
        class="select-item"
        placeholder="请选择车辆类型"
        :value.sync="formModel.carModelId"
      ></query-dict>
    </el-form-item>
    <el-form-item label="车辆押金:" prop="deposit">
      <el-input v-model.trim="formModel.deposit" class="select-item" placeholder="请输入车辆押金" clearable>
        <template slot="append">元</template>
      </el-input>
      <span class="input-info">* 0为免押</span>
    </el-form-item>
    <el-form-item label="不计免赔:" prop="insuranceMoney">
      <el-input v-model.trim="formModel.insuranceMoney" class="select-item" placeholder="请输入不计免赔金额" clearable>
        <template slot="append">元/小时</template>
      </el-input>
    </el-form-item>
    <el-form-item label="最高不计免赔:">
      <el-input v-model.trim="formModel.maxInsuranceMoney" class="select-item" placeholder="请输入最高不计免赔金额" clearable>
        <template slot="append">元/24小时</template>
      </el-input>
    </el-form-item>
    <el-form-item label="夜间时间计费:" prop="nightTimeUnit">
      <el-input v-model.trim="formModel.nightTimeUnit" class="select-item" placeholder="请输入夜间时间计费金额" clearable>
        <template slot="append">分/分钟</template>
      </el-input>
    </el-form-item>
    <el-form-item label="夜间里程计费:" prop="nightMilesUnit">
      <el-input v-model.trim="formModel.nightMilesUnit" class="select-item" placeholder="请输入夜间里程计费金额" clearable>
        <template slot="append">分/分钟</template>
      </el-input>
    </el-form-item>
    <el-form-item label="最低消费金额:" prop="minExpenditure">
      <el-input v-model.trim="formModel.minExpenditure" class="select-item" placeholder="请输入最低消费金额" clearable>
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="最高消费金额:" prop="maxExpenditure">
      <el-input v-model.trim="formModel.maxExpenditure" class="select-item" placeholder="请输入最高消费金额" clearable>
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="其他费用:">
      <el-input v-model.trim="formModel.otherCost" class="select-item" placeholder="请输入其他费用金额" clearable>
        <template slot="append">元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="描述:">
      <el-input
        type="textarea"
        :rows="4"
        maxlength="100"
        show-word-limitv-model.trim="formModel.describe"
        class="form-item"
        v-model="formModel.describe"
        placeholder="请输入描述"
        clearable
      />
    </el-form-item>
  </el-form>
</template>

<script>
import utils from 'utils'
import mixinTable from 'mixins/table'
import MixinForm from 'mixins/form'
import dictObj from '@/store/dictData'

export default {
  mixins: [MixinForm, mixinTable],
  props: {
    initData: {
      type: Object,
      default() {
        return {
          status: 1,
          deposit: 0
          // TODO... 初始化数据，需加备注
        }
      }
    }
  },
  data() {
    return {
      carTypeList: [], // 车辆类型
      cityList: [], // 城市列表
      initCityCode: '',
      disabledStatus: dictObj.disabledStatus,
      rules: {
        name: [{ required: true, message: '计费策略名称不能为空', trigger: 'blur' }],
        timeUnit: [{ required: true, message: '时间单元不能为空', trigger: 'blur' }],
        timeMoney: [{ required: true, message: '时间计费不能为空', trigger: 'change' }],
        milesMoney: [{ required: true, message: '里程计费不能为空', trigger: 'blur' }],
        deposit: [{ required: true, message: '车辆押金不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        carModelId: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
        insuranceMoney: [{ required: true, message: '不计免赔不能为空', trigger: 'blur' }],
        nightTimeUnit: [{ required: true, message: '夜间时长费用不能为空', trigger: 'blur' }],
        nightMilesUnit: [{ required: true, message: '夜间里程费用不能为空', trigger: 'blur' }],
        cityCode: [{ required: true, message: '请选择城市', trigger: 'change' }]
      }
    }
  },
  computed: {
    formModel: {
      get() {
        return this.initData
      },
      set(val) {
        this.$emit('update:init-data', val)
      }
    }
  },
  created() {
    const { cityCode, cityName } = utils.getStore('cityInfo')
    const cityList = utils.getStore('cityList')
    if (cityCode === '00') {
      this.initCityCode = '00'
      this.cityList = this.$store.getters.allCity.length ? this.$store.getters.allCity : cityList
    } else {
      this.cityList = [
        {
          label: cityName,
          value: cityCode
        }
      ]
      this.formModel.cityCode = cityCode
      this.initCityCode = '11'
    }
    this.getCarType()
  },
  methods: {
    getCarType() {
      this.$api.vehicle
        .fetch('carTypeList', {
          rows: 1,
          offset: 999
        })
        .then(res => {
          const carTypeList = res.data.map(val => ({ label: val.modelId, value: val.id }))
          this.carTypeList = carTypeList
        })
    }
  }
}
</script>
